<template>
    <div class="header-search-wrap">
        <div class="left-content">
            <el-form :model="formData" inline>
                <el-form-item label="课程名称" class="mr20">
                    <el-input
                        class="srt-el-input w200 h32"
                        v-model="formData.title"
                        maxlength="50"
                        placeholder="请输入课程名称"
                        clearable>
                    </el-input>
                </el-form-item>
                <!-- Banner -->
                <el-form-item label="学段" class="mr20">
                    <el-select
                        :class="['srt-select', 'w127', 'h32', {'srt-clear-select' : formData.stageId}]"
                        popper-class="srt-select-popper"
                        v-model="formData.stageId"
                        @change="changeStage"
                        placeholder="请选择学段"
                        clearable>
                        <el-option
                            v-for="item in list.stageList"
                            :key="item.stage"
                            :label="item.stageName"
                            :value="item.stage"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="年级" class="mr20">
                    <el-select
                        :class="['srt-select', 'w127', 'h32', {'srt-clear-select' : formData.gradeId}]"
                        popper-class="srt-select-popper"
                        v-model="formData.gradeId"
                        placeholder="请选择年级"
                        clearable>
                        <el-option
                            v-for="item in list.gradeList"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="学科">
                    <el-select
                        :class="['srt-select', 'w127', 'h32', {'srt-clear-select' : formData.subjectId}]"
                        popper-class="srt-select-popper"
                        v-model="formData.subjectId"
                        placeholder="请选择学科"
                        clearable>
                        <el-option
                            v-for="item in list.subjectList"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        />
                    </el-select>
                </el-form-item>
                <div class="flex-wrap">
                    <el-form-item label="教师姓名">
                        <el-input
                            class="srt-el-input w200 h32"
                            v-model="formData.lecturerName"
                            maxlength="50"
                            placeholder="请输入教师姓名"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <div class="right-content">
                        <el-button class="srt-el-button srt-el-button--primary srt-el-button-h32" @click="search">查询</el-button>
                        <el-button class="srt-el-button srt-el-button--cancel srt-el-button-h32" @click="clear">重置</el-button>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

let emit = defineEmits(['search']);

defineExpose({ 
    clear 
});

// 项目筛选信息
const formData = ref({
    title: '',
    lecturerName: '',
    gradeId: '',
    subjectId: '',
    stageId: '',
})

const list = reactive({
    stageList: [],
    subjectList: [],
    gradeList: []
})


// 搜索
function search () {
    let params = Object.assign({}, formData.value);
    params.title = params.title && params.title.trim() || '';
    params.lecturerName = params.lecturerName && params.lecturerName.trim() || '';
    emit('search', params);
}

// 重置筛选条件
function clear () {
    Object.keys(formData.value).forEach(key => {
        formData.value[key] = '';
    })
    search();
}


function changeStage() {
    let temp = list.stageList.find(item => item.stage === formData.value.stageId);
    list.subjectList = temp?.subjects || [];
    list.gradeList = temp?.grades|| [];
    formData.value.gradeId = '';
    formData.value.subjectId = '';
}

function getData () {
    // 获取学段学科年级列表
    return store.dispatch('common/getStageRefSubject').then((res) => {
       list.stageList = res || [];
    }).catch(err => {
        console.log(err);
    });
}

onMounted(() => {
   getData();
})

</script>

<style lang="scss" scoped>
.header-search-wrap {
    margin-bottom: 10px;
    .w200 {
        width: 200px;
    }
    .w127 {
        width: 136px;
    }
    .w100 {
        width: 100px;
    }
    .h32 {
        height: 32px;
        :deep(.el-input__wrapper) {
            height: 32px!important;
        }
    }
    .mr20 {
        margin-right: 20px !important;
    }
    :deep(.el-form-item__label) {
        line-height: 40px;
        height: 40px;
        color: var(--srt-color-gray);
        margin-right: 8px;
    }
    :deep(.el-form--inline .el-form-item) {
        margin-right: 0px;
    }
    :deep(.srt-select) {
        .el-input__wrapper {
            height: 40px;
        }
    }
    :deep(.el-form-item) {
        margin-bottom: 20px;
    }

    .flex-wrap {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
}
</style>